<template>
	<ls-skeleton :loading="loading">
		<view class="container">
			<u-swiper height="750" :list="swiperList" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px" @click="previewImage">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</u-swiper>
			<view class="a">
				<view class="h1">
					{{detail.productName}}
				</view>
				<view class="uni-inline-item">
					<!-- <view class="uni-flex-item" v-if="type == 'STORE'">
					￥{{detail.costPrice}} <text style="margin-left: 10rpx;">￥{{detail.productPrice}}</text>
				</view>
				<view class="uni-flex-item" v-if="type == 'SALE'">
					￥{{detail.proxyPrice}} <text style="margin-left: 10rpx;">￥{{detail.costPrice}}</text>
				</view> -->
					<view class="uni-flex-item" v-if="detail.proxyPrice && userType == 'STORE'&&isLogin">
						￥{{detail.proxyPrice||0}}
					</view>
					<view class="uni-flex-item" v-if="detail.salePrice && userType == 'CAR'||!isLogin">
						￥{{detail.salePrice||0}}
					</view>
					<view class="uni-flex-item" v-if="detail.productPrice && userType == 'SALE'&&isLogin">
						￥{{detail.productPrice||0}}
					</view>
				</view>
			</view>
			<view class="c">
				<view class="title">商品详情</view>
				<view class="bd product-intro" v-if="detail.detailImgUrls && detail.detailImgUrls.length > 0">
					<image mode="widthFix" :src="item" v-for="(item, index) in detail.detailImgUrls" :key="index">
					</image>
				</view>
				<u-empty v-else mode="favor" icon="../../../../static/images/list.png" text="暂无详情图片" width="320"
					height="320" textSize="24">
				</u-empty>
			</view>


			<!-- 门店 -->
			<!-- 	<view class="footer flex-row row-between-wrapper" v-if="userType == 'STORE' && type == 'STORE'"> -->
			<view class="footer flex-row row-between-wrapper">
				<navigator hover-class="none" class="item skeleton-rect" open-type="switchTab" url="/pages/index/index">
					<view class="iconfont icon-shouye6"></view>
					<view class="p_center">首页</view>
				</navigator>
				<!-- 	<view @click="setCollect" class="item skeleton-rect">
					<view class="iconfont icon-kefu"></view>
					<view class="p_center">客服</view>
				</view> -->
				<view class="animated item skeleton-rect" :class="animated == true ? 'bounceIn' : ''" @click="goCart">
					<view class="iconfont icon-gouwuche1">
						<text class="num bg-color" v-if="parseInt(CartCount) > 0">{{
		  CartCount || 0
		}}</text>
					</view>
					<view class="p_center skeleton-rect">购物车</view>
				</view>
				<view>
					<view class="bnt flex-row skeleton-rect">
						<form @submit="joinCart" class="joinCart bnts">
							<button class="joinCart bnts" form-type="submit">
								加入购物车
							</button>
						</form>
						<form @submit="goBuy" class="buy bnts">
							<button class="buy bnts" form-type="submit">
								立即购买
							</button>
						</form>
					</view>
				</view>
			</view>
			<!-- 批发商 -->
			<!-- 	<view class="footer flex-row row-between-wrapper" v-if="userType == 'SALE' && type == 'SALE'">
				<navigator hover-class="none" class="item skeleton-rect" open-type="switchTab" url="/pages/index/index">
					<view class="iconfont icon-shouye6"></view>
					<view class="p_center">首页</view>
				</navigator>
				<view @click="setCollect" class="item skeleton-rect">
					<view class="iconfont icon-kefu"></view>
					<view class="p_center">客服</view>
				</view>
				<view class="animated item skeleton-rect" :class="animated == true ? 'bounceIn' : ''" @click="goCart">
					<view class="iconfont icon-gouwuche1">
						<text class="num bg-color" v-if="parseInt(CartCount) > 0">{{
		  CartCount || 0
		}}</text>
					</view>
					<view class="p_center skeleton-rect">购物车</view>
				</view>
				<view>
					<view class="bnt flex-row skeleton-rect">
						<form @submit="joinCart" class="joinCart bnts">
							<button class="joinCart bnts" form-type="submit">
								加入购物车
							</button>
						</form>
						<form @submit="goBuy" class="buy bnts">
							<button class="buy bnts" form-type="submit">
								立即购买
							</button>
						</form>
					</view>
				</view>
			</view> -->

			<productWindow :attr="attr" :isShow="0" :iSplus="1" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
				@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window"
				@getImg="showImg"></productWindow>
			<!-- <view class="footer">
			<u-button type="primary" color="#06A972" text="立即购买" @click="buy"></u-button>
		</view> -->

		</view>
	</ls-skeleton>
</template>


<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from "@/libs/login.js";
	import {
		getDetail
	} from "@/api/product.js";
	import {
		getUserCar,
		addToCar
	} from "@/api/order.js";
	import productWindow from "@/components/productWindow";
	export default {
		components: {
			productWindow
		},
		data() {
			return {
				currentNum: 0,
				topSwiperIndex: 0,
				swiperList: [],
				detail: {},
				CartCount: 0,
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
				attrValue: "", //已选属性
				isOpen: false, //是否打开属性组件
				cart_num: 1, //购买数量
				productValue: [], //系统属性
				attrTxt: '请选择',
				type: '',
				loading: true
			}

		},
		computed: mapGetters(["isLogin", 'uid', 'userType']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						this.getUserCar();
					}
				},
				deep: true,
			},
		},
		onLoad(option) {
			let that = this;
			that.productId = option.productId || 0;
			that.type = option.type || 'STORE';
			if (!that.productId) {
				return that.$util.Tips({
					title: '产品不存在'
				}, {
					tab: 3
				});
			}
		},

		onShow() {
			let that = this;
			that.getProdcutDetail();
			console.log(this.userType);
		},

		methods: {
			/**
			 * 分享
			 */
			shareCard() {
				uni.showShareMenu({
					//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
				})
			},
			// 分享到朋友
			onShareAppMessage(res) {
				let that = this;
				//这块需要传参，不然链接地址进去获取不到数据
				return {
					title: that.title,
					path: 'pages/goods/goods_detail/index?productId=' + that.productId,
					imageUrl: ''
				};
			},
			
			//分享到朋友圈
			onShareTimeline(res) {
				let that = this;
				return {
					title: that.title,
					path: 'pages/goods/goods_detail/index?productId=' + that.productId,
					imageUrl: '',
				}
			},
			previewImage(e) {
			    const index = e.current; // 获取当前点击的图片索引
			    const imageUrls = this.swiperList.map(item => item); // 获取所有图片的URL数组
			    const currentUrl = imageUrls[index]; // 当前点击的图片URL
			
			    // 调用图片预览
			    wx.previewImage({
			      current: currentUrl, // 当前显示图片的http链接
			      urls: imageUrls, // 需要预览的图片http链接列表
			      success: () => {
			        console.log('图片预览成功');
			      },
			      fail: (err) => {
			        console.error('图片预览失败', err);
			      }
			    });
			  },
			topSwiperTab(e) {
				var that = this;
				this.topSwiperIndex = Number(e.target.current);
			},

			/**
			 * 获取产品详情
			 * @@param {int} productId  
			 */
			getProdcutDetail() {
				let that = this;
				getDetail({
					productId: that.productId
				}).then(res => {
					that.loading = false;
					that.detail = res.value;
					that.swiperList = [].concat(res.value.productImage);
					that.detail.detailImgUrls = that.detail.detailImgUrls && that.detail.detailImgUrls.split(",");
					res.value.specificationList.forEach((e) => {
						e.productImage = res.value.productImage
					})
					that.detail.proxyPrice = res.value.specificationList[0].proxyPrice
					that.detail.productPrice = res.value.specificationList[0].productPrice
					that.detail.salePrice = res.value.specificationList[0].salePrice

					that.$set(that, "productValue", res.value.specificationList);

					let attr = [],
						attr_value = [],
						attr_values = [],
						list = res.value.specificationList;
					list.forEach((e, i) => {
						attr_value.push({
							attr: e.specifications,
							check: false
						});
						attr_values[i] = e.specifications;
					})
					attr.push({
						attr_value: attr_value,
						attr_values: attr_values,
						productId: that.detail.productId
					})
					that.$set(that.attr, "productAttr", attr);

					// 获取用户的购物车
					if (that.isLogin) {
						console.log(1)
						that.getUserCar();
					}
					// 默认选择规格de
					that.defaultSelect();
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 去购物车
			 */
			goCart() {
				uni.navigateTo({
					url: '/pages/goods/goods_addcart/index'
				});
			},

			/**
			 * 立即购买
			 */
			goBuy(e) {
				if (this.isLogin === false) {
					toLogin();
				} else {
					this.addCart(true);
				}
			},

			/**
			 * 获取用户购物车
			 */
			getUserCar() {
				if (this.isLogin) {
					let that = this;
					getUserCar({
						userInfoId: that.uid
					}).then(res => {
						that.CartCount = res.value.length;
						console.log("that.CartCount=" + that.CartCount)
					}).catch(err => {
						that.$util.Tips({
							title: err
						});
					})
				}
			},

			/**
			 * 弹框关闭
			 */
			onMyEvent: function() {
				this.$set(this.attr, "cartAttr", false);
				this.$set(this, "isOpen", false);
			},

			/**
			 * 属性变动赋值
			 */
			ChangeAttr: function(res) {
				let index = this.productValue.findIndex((e) => {
					return e.specifications == res
				});
				let productSelect = this.productValue[index];
				if (!productSelect) {
					this.$util.Tips({
						title: "暂无该产品,重新选择",
						success: () => {
							this.a = true
							this.attr.productSelect.cart_num = 0
						},
					});
				} else {
					this.a = false
				}
				// this.$set(this, "selectSku", productSelect);
				if (productSelect) {
					this.$set(this.attr.productSelect, "image", productSelect.productImage);
					if (this.type == 'STORE') {
						// this.$set(this.attr.productSelect, "price", productSelect.productPrice);
						// 2024-01-21
						this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					} else if (this.type == 'SALE') {
						this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					} else {
						this.$set(this.attr.productSelect, "price", productSelect.salePrice);
					}
					// if (this.userType == 'STORE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					// } else if(this.userType == 'SALE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					// }
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", index);
					this.$set(this, "attrTxt", "已选择");
				} else {
					this.$set(this.attr.productSelect, "image", productSelect.productImage);
					if (this.type == 'STORE') {
						// this.$set(this.attr.productSelect, "price", productSelect.productPrice);
						// 2024-01-21
						this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					} else if (this.type == 'SALE') {
						this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					} else {
						this.$set(this.attr.productSelect, "price", productSelect.salePrice);
					}
					// if (this.userType == 'STORE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					// } else if(this.userType == 'SALE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					// }
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},

			/**
			 * 购物车数量加和数量减
			 */
			ChangeCartNum: function(changeValue) {
				//changeValue:是否 加|减
				//获取当前变动属性
				let productSelect = this.productValue[this.attrValue];
				//如果没有属性,赋值给商品默认库存
				if (productSelect === undefined && !this.attr.productAttr.length)
					productSelect = this.attr.productSelect;
				//无属性值即库存为0；不存在加减；
				if (productSelect === undefined) return;
				let stock = productSelect.stock || 0;
				let num = this.attr.productSelect;
				if (changeValue) {
					num.cart_num++;
					// if (num.cart_num > stock) {
					// 	this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
					// 	this.$set(this, "cart_num", stock ? stock : 1);
					// }
				} else {
					num.cart_num--;
					// if (num.cart_num < 1) {
					// 	this.$set(this.attr.productSelect, "cart_num", 1);
					// 	this.$set(this, "cart_num", 1);
					// }
				}
			},

			/**
			 * @param {Object} val
			 * 规格赋值
			 */
			attrVal(val) {
				this.$set(
					this.attr.productAttr[val.indexw],
					"index",
					this.attr.productAttr[val.indexw].attr_values[val.indexn]
				);
			},

			/**
			 * 购物车手动填写
			 */
			iptCartNum: function(e) {
				this.$set(this.attr.productSelect, "cart_num", e);
			},

			/**
			 * 点击sku图片打开轮播图
			 */
			showImg(index) {
				console.log(index);
			},

			/**
			 * 打开属性加入购物车
			 */
			joinCart: function(e) {
				//是否登录
				if (this.isLogin === false) {
					toLogin();
				} else {
					this.addCart();
				}
			},

			/*
			 * 加入购物车
			 */
			addCart(news) {
				let that = this,
					productSelect = that.productValue[that.attrValue];
				that.currentPage = false;
				//打开属性
				if (that.attrValue) {
					//默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
					that.attr.cartAttr = !that.isOpen ? true : false;
				} else {
					if (that.isOpen) that.attr.cartAttr = true;
					else that.attr.cartAttr = !that.attr.cartAttr;
				}
				//只有关闭属性弹窗时进行加入购物车
				if (that.attr.cartAttr === true && that.isOpen === false)
					return (that.isOpen = true);
				//如果有属性,没有选择,提示用户选择
				if (
					that.attr.productAttr.length &&
					productSelect === undefined &&
					that.isOpen === true
				)
					return that.$util.Tips({
						title: "产品库存不足，请选择其它属性",
					});
				if (that.attr.productSelect.cart_num <= 0) {
					that.attr.productSelect.cart_num = 1;
					that.isOpen = false;
					return that.$util.Tips({
						title: "请先选择数量",
					});
				}
				console.log(that.attr.productSelect);
				// console.log(q)
				if (news) {
					that.isOpen = false;
					that.attr.cartAttr = false;
					uni.navigateTo({
						url: "/pages/goods/order_confirm/index?detail=" + encodeURIComponent(JSON.stringify(
								productSelect)) +
							"&buyNumber=" +
							that.attr.productSelect.cart_num + "&type=" + that.userType,
					});
				} else {
					addToCar({
							userInfoId: that.uid,
							proDetailId: productSelect.proDetailId,
							addNumber: that.attr.productSelect.cart_num
						}).then(function(res) {
							that.isOpen = false;
							that.attr.cartAttr = false;

							that.$util.Tips({
								title: "添加购物车成功",
								success: () => {
									that.getUserCar(true);
								},
							});
						})
						.catch((err) => {
							that.isOpen = false;
							return that.$util.Tips({
								title: err,
							});
						});
				}
			},


			/**
			 * 默认选中规格
			 */
			defaultSelect() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (var key in this.productValue) {
					value = this.attr.productAttr.length ? key.split(",") : [];
					break;
				}
				for (let i = 0; i < productAttr.length; i++) {
					// this.$set(productAttr[i], "index", value[i]);
					this.$set(productAttr[i], "index", this.productValue[value[i]].specifications);
				}
				let productSelect = this.productValue[value.join(",")];
				if (productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						productSelect.productName
					);
					this.$set(this.attr.productSelect, "image", productSelect.productImage);
					if (this.userType == 'STORE') {
						// this.$set(this.attr.productSelect, "price", productSelect.productPrice);
						// 2024-01-21
						this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					} else if (this.userType == 'SALE') {
						this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					} else {
						this.$set(this.attr.productSelect, "price", productSelect.salePrice);
					}
					// if (this.userType == 'STORE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					// } else if(this.userType == 'SALE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					// }
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", value.join(","));
					this.$set(this, "attrTxt", "已选择");
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.detail.productName
					);
					this.$set(this.attr.productSelect, "image", this.detail.productImage);
					if (this.userType == 'STORE') {
						// 2024-01-21
						// this.$set(this.attr.productSelect, "price", productSelect.productPrice);
						this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					} else if (this.userType == 'SALE') {
						this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					} else {
						this.$set(this.attr.productSelect, "price", productSelect.salePrice);
					}
					// if (this.userType == 'STORE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					// } else if(this.userType == 'SALE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					// }
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.detail.productImage);
					if (this.userType == 'STORE') {
						// 2024-01-21
						// this.$set(this.attr.productSelect, "price", productSelect.productPrice);
						this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					} else if (this.userType == 'SALE') {
						this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					} else {
						this.$set(this.attr.productSelect, "price", productSelect.salePrice);
					}
					// if (this.userType == 'STORE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.productPrice);
					// } else if(this.userType == 'SALE') {
					// 	this.$set(this.attr.productSelect, "price", productSelect.proxyPrice);
					// }
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.container {
		position: relative;
		// padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
		// padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}

	.container .a {
		background-color: #fff;
		padding: 20rpx 30rpx;
	}

	.container .a .uni-inline-item {
		font-size: 32rpx;
		font-weight: bold;
		color: #E91E1E;
	}

	.container .a .uni-inline-item text {
		text-decoration: line-through;
		color: #BDBDBD;
		font-size: 24rpx;
		font-weight: normal;
	}

	.container .a .h1 {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		margin-top: 10rpx;
	}

	.container .b .title {
		margin-bottom: 30rpx;
		position: relative;
		color: #666;
		font-size: 24rpx;
	}

	.container .b .title .uni-navigate-right:after {
		right: 0;
	}

	.container .b .title .uni-flex-item {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.container .b .pic {
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.container .b .p {
		padding: 15rpx 0;
	}

	.container .b .uni-inline-item {
		line-height: 36rpx;
	}

	.container .b .star image {
		width: 17rpx;
		height: 17rpx;
		margin-right: 5rpx;
	}

	.container .b .h3 {
		font-weight: bold;
	}

	.container .b .ul {
		display: flex;
		flex-wrap: wrap;
		margin: -13rpx;
	}

	.container .b .ul>view {
		width: 33.333%;
		box-sizing: border-box;
		padding: 13rpx;
	}

	.container .b .ft {
		text-align: center;
	}

	.container .b .ft button {
		width: 210rpx;
		height: 50rpx;
		border: none;
		padding: 0;
		line-height: 50rpx;
		color: #666;
		background: #F3F3F3;
		border-radius: 25rpx;
		font-size: 24rpx;
	}

	.container .b .ft button text::after {
		content: " ";
		display: inline-block;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 4px solid #999;
		margin-left: 5px;
	}

	.container .c {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.container .c .title {
		font-size: 15px;
		color: #333;
		height: 43px;
		width: 100%;
		background-color: #fff;
		text-align: center;
		line-height: 43px;
	}

	.container .d {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		z-index: 99;
	}

	.footer {
		padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		line-height: 2.55555556;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000;
		background-color: #f8f8f8;
		cursor: pointer;
	}

	button::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid rgba(0, 0, 0, .2);
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 10px;
	}

	button::after {
		border: 0;
	}

	.footer .item {
		font-size: 18rpx;
		color: #666;
	}

	.footer .item .iconfont {
		text-align: center;
		font-size: 40rpx;
		height: 55rpx;
	}

	.footer .item .iconfont.icon-shoucang1 {
		color: var(--view-theme);
	}

	.footer .item .iconfont.icon-gouwuche1 {
		font-size: 40rpx;
		position: relative;
	}

	.footer .item .iconfont.icon-gouwuche1 .num {
		color: #fff;
		position: absolute;
		font-size: 16rpx;
		padding: 2rpx 12rpx 2rpx;
		border-radius: 200rpx;
		top: -5rpx;
		right: -10rpx;
	}

	.virbnt {
		width: 444rpx !important;
		height: 76rpx !important;
		border-radius: 50rpx !important;
		overflow: hidden;
	}

	.virbnts {
		width: 444rpx !important;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
		background-color: #22CAFD;
		border-radius: 50rpx !important;
	}

	.footer .bnt {
		width: 444rpx;
		height: 76rpx;
	}

	.footer .bnt .bnts {
		width: 222rpx;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.footer .bnt .joinCart {
		border-radius: 50rpx 0 0 50rpx;
		background-color: #00af6f;
		// background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.footer .bnt .buy {
		border-radius: 0 50rpx 50rpx 0;
		background-color: #06A972;
		// background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.p_center {
		text-align: center;
	}

	.product-intro {
		position: relative;
		margin-top: 10px;
		width: 100%;
		padding-bottom: 50px;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		overflow: hidden;
	}
</style>